<template>
  <Card>
    <span slot="title">组织机构管理</span>
    <div slot="content">
      <div class="zuzhijigouguanli">
        <div class="top_tools">
          <el-form
            :model="searchForm"
            :rules="searchFormRules"
            ref="searchForm"
            inline
          >
            <el-form-item prop="departmentName">
              <el-input
                placeholder="请输入单位名称"
                size="small"
                v-model="searchForm.departmentName"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <we-button size="small" type="primary" @click="handleSearch"
                ><i class="el-icon-search"></i>查询</we-button
              >
              <we-button size="small" @click="handleReset(searchForm)"
                ><i class="el-icon-refresh"></i>重置</we-button
              >
            </el-form-item>
          </el-form>
          <div class="right_btns">
            <!-- <we-button
              @click="handleReturn"
              v-show="parentId === '' ? false : true"
              size="small"
              >返回</we-button
            > -->
            <we-button size="small" type="primary" @click="openAdd"
              ><i style="font-weight: 700" class="el-icon-plus"></i
              >添加</we-button
            >
          </div>
        </div>
        <div class="table">
          <el-table
            size="mini"
            :header-cell-style="headerStyle"
            stripe
            ref="tableData"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 99.9%"
          >
            <el-table-column
              header-align="center"
              align="center"
              label="#"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column label="单位名称">
              <template slot-scope="scope">
                <span class="danweiName" @click="toChildren(scope.row)"
                  >{{ scope.row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderNumber"
              header-align="center"
              align="center"
              label="显示顺序"
            >
            </el-table-column>
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <we-button
                  @click="handleEdit(scope.row)"
                  size="mini"
                  type="primary"
                  ><i class="el-icon-edit"></i>编辑
                </we-button>
                <we-button
                  @click="handleDel(scope.row)"
                  size="mini"
                  type="danger"
                  ><i class="el-icon-delete"></i>删除</we-button
                >
                <!-- 编辑模态框 -->
                <el-dialog
                  width="30%"
                  class="editDialog"
                  title="修改信息"
                  :visible.sync="editDialogFormVisible"
                >
                  <el-form
                    :model="editForm"
                    :rules="editFormRules"
                    ref="editForm"
                  >
                    <el-form-item
                      prop="name"
                      label="单位名称"
                      label-width="80px"
                    >
                      <el-input
                        v-model="editForm.name"
                        placeholder="请填写单位全称，与公章一致"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      prop="orderNumber"
                      label="显示排序"
                      label-width="80px"
                    >
                      <el-input
                        v-model="editForm.orderNumber"
                        placeholder="
一般不需要填写，系统将自动生成，排列再同级最后"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <we-button @click="addDialogFormVisible = false"
                      >取 消</we-button
                    >
                    <we-button type="primary" @click="submitEdit"
                      >确 定</we-button
                    >
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination">
            <we-Pagination
              :page="pagination.pageNum"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @currentChange="currentChange($event)"
            >
              ></we-Pagination
            >
          </div>
          <!-- 添加模态框 -->
          <el-dialog
            width="30%"
            class="addDialog"
            title="申报人信息"
            :visible.sync="addDialogFormVisible"
          >
            <el-form :model="addForm" :rules="addFormRules" ref="addForm">
              <el-form-item prop="name" label="单位名称" label-width="80px">
                <el-input
                  v-model="addForm.name"
                  placeholder="请填写单位全称，与公章一致"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="orderNumber"
                label="显示排序"
                label-width="80px"
              >
                <el-input
                  v-model.number="addForm.orderNumber"
                  placeholder="
系统将自动生成，排列再同级最后"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <we-button @click="addDialogFormVisible = false">取 消</we-button>
              <we-button type="primary" @click="handleAdd">确 定</we-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import local from "@/utils/local";
import { orderNum_REG } from "@/utils/reg";
// 引入ajax函数
import {
  getOrganizationManagementList,
  addEditOrganizationManagement,
  delOrganizationManagement,
} from "@/api/titleDeclaration";
export default {
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      // 搜索表单
      searchForm: {
        departmentName: "",
      },
      // 父级部门id
      parentId: null,
      // 子部门id
      childId: "",
      // 查询规则
      // 查询规则
      searchFormRules: {
        title: [{ max: 50, message: "必须小于 50 个字符", trigger: "blur" }],
      },
      // 添加规则
      addFormRules: {
        name: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        orderNumber: {
          max: 5,
          message: "长度必须小于 6 个字符",
          trigger: "blur",
        },
      },
      // 修改规则
      editFormRules: {
        name: [
          { required: true, message: "请输入修改单位名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
      editForm: {
        name: "",
        orderNumber: "",
      },
      // 表格数据
      tableData: [],
      // 分页数据
      pagination: {
        total: 1, // 总数据条数
        pageSize: 8, // 每页条数
        pageNum: 1, // 当前页
      },
      // 添加机构表单
      addForm: {
        name: "",
        orderNumber: "",
      },
      addDialogFormVisible: false,
      editDialogFormVisible: false,
    };
  },
  methods: {
    //打开添加框
    openAdd() {
      this.addDialogFormVisible = true;
    },
    // 强制转数字
    toNum() {
      if (this.addForm.orderNumber !== Number) {
        this.addForm.orderNumber = 1;
      }
    },
    // 表头样式回调
    headerStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    // 查询
    handleSearch() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.pagination.pageNum = 1;
          this.fetchData();
        } else {
          return false;
        }
      });
    },
    // 重置
    handleReset() {
      this.searchForm = {
        departmentName: "",
      };
      this.handleSearch();
    },
    // 跳转至子部门
    async toChildren(data) {
      this.parentId = data.uuid;
      this.fetchData();
    },

    // 编辑触发
    handleEdit(data) {
      this.editDialogFormVisible = !this.editDialogFormVisible;
      let { name, orderNumber, uuid } = data;
      this.editForm = { name, orderNumber, uuid };
    },

    // 添加组织管理机构
    handleAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          // 模态框状态取反
          this.addDialogFormVisible = !this.addDialogFormVisible;
          let { code, msg } = await addEditOrganizationManagement({
            name: this.addForm.name,
            orderNumber: this.addForm.orderNumber,
          });
          if (code === 200) {
            this.addForm = {
              name: "",
              orderNumber: "",
            };
            this.$message({
              type: "success",
              message: msg,
            });
            this.fetchData();
          }
        } else {
          return false;
        }
      });
    },

    // 提交修改
    submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          // 模态框状态取反
          this.editDialogFormVisible = !this.editDialogFormVisible;
          let { code, msg } = await addEditOrganizationManagement(
            this.editForm
          );
          if (code === 200) {
            this.fetchData();
            this.$message({
              type: "success",
              message: msg,
            });
          }
        } else {
          return false;
        }
      });
    },

    // 删除机构
    async handleDel(data) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { code, msg } = await delOrganizationManagement({
            uuid: data.uuid,
          });

          if (code === 200) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.fetchData();
          } else {
            this.$message({
              type: "danger",
              message: msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 获取数据
    async fetchData() {
      // 发送请求 获取账号列表
      let res = await getOrganizationManagementList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        parentId: this.parentId,
        // 查询参数
        departmentName: this.searchForm.departmentName,
      });
      // 解构数据
      let { code, data } = res;
      local.set("fatherid", data.fatherId);
      // 边界判断
      if (!data.resList.length && this.pagination.pageNum !== 1) {
        this.pagination.pageNum -= 1;
        this.fetchData();
      }
      // 赋值渲染
      if (code === 200) {
        this.pagination.total = data.totals;
        this.tableData = data.resList;
      }
      console.log("当前panrntid" + this.parentId);
    },
    // 当前页改变
    currentChange(event) {
      this.pagination.pageNum = event;
      this.fetchData();
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang="less" scoped>
.top_tools {
  display: flex;
  justify-content: space-between;
}
.table {
  .danweiName {
    cursor: pointer;
    &:hover {
      color: #0063c7;
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
